import React, { FC, useState} from 'react'
import styled from "styled-components"
import headerbak from '@/assert/images/header.png'
import haderText from '@/assert/images/tite.png'
import leftMenu from '@/assert/images/list.png'
import Right from './right'
import { useStores } from '@/store'
import {menuList} from '@/router'
import {useNavigate} from 'react-router-dom'
import { inject, observer } from 'mobx-react'
import { HeaderType } from '@/store/header'
import { observable } from 'mobx'

const HeaderFrame=styled.div`
    position: relative;
    width:100%;
    height:8.3rem;
    background-image: url(${headerbak});
    background-size: 100%,100%; 
    background-repeat: no-repeat;
    .title{
      font-size: 3.2rem;
      font-weight: bold;
      color:#ffff; 
      line-height: 46px;
      position:absolute;
      top:50%;
      left:55%;
      transform: translate(-50%,-50%);
    }
    .list{
      cursor: pointer;
      position: absolute;
      display: inline-block;
      width: 3.3rem;
      height: 3.3rem;
      top:1rem;
      left:2rem;
      background-image: url(${leftMenu});
      background-size: 100%,100%; 
      background-repeat: no-repeat;
    }
    .menu{
      position:absolute;
      height: auto;
      width: 10rem;
      z-index: 100000;
      top:60%;
      left:1%; 
      background: #045585;
      padding-top:1rem;
      .row{
        width: 10rem;
        cursor: pointer;
        text-align: center;
        font-size: 1.4rem; 
        padding:1rem;
        color:#ffff;
        border-bottom: 1px solid rgb(25, 217, 254);
      }
      .row:hover,.row:active{
          background-color:rgb(25, 217, 254);;
      }
    }
    
`
const HeaderImg=styled.img`
    position:absolute;
    top:50%;
    left:45%;
    width:14rem;
    height: 5.6rem;
    transform: translate(-50%,-50%);
`

const Header: FC<{}> = function (props) {  
  const store = useStores();
  const navigate= useNavigate()
  const [menuShow, setMenuShow]=useState(false)
  const showMenuList=()=>{
    setMenuShow(!menuShow);
  }
  return ( 
   <HeaderFrame>
     <div className='list' onClick={showMenuList} />
     {menuShow?<div className='menu'>
       {menuList.map((val)=> <div key={val.path} className='row' onClick={()=>{navigate(val.path);showMenuList()}}>{val.name}</div>)}
     </div>:null}
     <HeaderImg src={haderText} />
     <div className='title'>{store.header.headerName}</div>
      <Right />
    </HeaderFrame>
  )
}

export default observer(Header)
